import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { NavBar, Image as MyImage, Button } from "antd-mobile";
import $fetch from "../../../utils/app/$fetch";
import "./style.scss";

const formatTime = (remainingTime: any) => {
  const minutes = Math.floor(remainingTime / 60);
  const seconds = Math.floor((remainingTime % 60) / 1000);

  return `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;
};

export default function ActivityQueue() {
  const location: any = useLocation();
  const detail: any = location?.state?.detail;
  const intervalRefs: any = useRef();

  const {
    memberName,
    memberId,
    name,
    waitingTime,
    phoneNum,
    goodsName,
    num,
    customerId,
    memberFormulPhoto,
    eventId,
  }: any = detail;

  useEffect(() => {
    initPage();
    return () => {
      clearInterval(intervalRefs.current);
    };
  }, []);

  const initPage = () => {};

  const handleComplete = async () => {
    await $fetch(
      `operation/verifyTicketByEle/${customerId}/${memberId}?eventId=${eventId}`,
      {},
      { method: "post", noGroupId: "no" }
    );
    await $fetch(
      `/operation/deleteLine/${customerId}/${memberId}?eventId=${eventId}`,
      {},
      { loading: false, method: "post", noGroupId: "no" }
    );
    window.history.go(-1);
  };

  const handleError = async () => {
    await $fetch(
      `/operation/updateLine/${customerId}/${memberId}?eventId=${eventId}`,
      {},
      { method: "post", noGroupId: "no" }
    );
    window.history.go(-1);
  };

  const back = () => {
    window.history.go(-1);
  };

  return (
    <div className="container_activity_dianqie">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={() => back()}
      >
        活动详情
      </NavBar>
      <div className="activity_public">
        <li className="that_item">
          <MyImage
            src={memberFormulPhoto}
            fit="cover"
            width="4rem"
            height="4rem"
            lazy={true}
          />
          <div className="name" style={{ flex: 1 }}>
            {memberName}
          </div>
        </li>

        <ul>
          <li>当前电切粉丝：{name}</li>
          <li className="tel">
            <div>手机号：{phoneNum} </div>
            <img
              onClick={() => {
                window.location.href = `tel:${phoneNum}`;
              }}
              src={require("../../../asset/imgs/phone.png")}
              alt=""
            />
          </li>
          <li>核销类型：{goodsName}</li>
          <li>核销张数：{num}</li>
        </ul>

        <div className="total_time">
          总时长：<span>{formatTime(waitingTime || "")}</span>
        </div>

        <div className="that_footer">
          <Button onClick={handleComplete}>完成电切</Button>
          <Button onClick={handleError}>无法联系</Button>
        </div>
      </div>
    </div>
  );
}
